<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 用户手机号：</p>
        <el-input v-model="queryParams.phone"  placeholder="请输入品牌名称"></el-input>
      </el-col>
      <!--      <el-col :span="4">-->
      <!--        <p class="label-form"> 状态：</p>-->
      <!--        <el-select style="width: 100%;" clearable v-model="queryParams.status" placeholder="请选择">-->
      <!--          <el-option-->
      <!--            v-for="item in messageType"-->
      <!--            :key="item.dictValue"-->
      <!--            :label="item.dictLabel"-->
      <!--            :value="Number(item.dictValue)">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-col>-->
      <el-col :span="4">
        <p class="label-form"> 申请类型：</p>
        <el-select style="width: 100%;" clearable v-model="queryParams.type" placeholder="请选择">
          <el-option
            v-for="item in optionsType"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="Number(item.dictValue)">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>

    <!--    <el-row :gutter="20" style="margin-top: 10px">-->
    <!--      <el-col :span="4">-->
    <!--        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <el-table :data="tableData"
              row-key="id"
              :expand-row-keys="expandedRowKeys"
              @expand-change="handleExpand"
              border style="margin-top: 30px">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div style="padding: 20px;box-sizing: border-box">
            <el-table :data="tyreList" border style="" v-loading="loading">
              <el-table-column prop="position" label="轮胎位置">
                <template slot-scope="scope">
                  {{position(scope.row.position)}}
                </template>
              </el-table-column>
              <el-table-column prop="specification" label="轮胎规格"></el-table-column>
              <el-table-column prop="patten" label="轮胎花纹"></el-table-column>
              <el-table-column prop="size" label="轮胎尺寸"></el-table-column>
              <el-table-column prop="dot" label="轮胎DOT信息"></el-table-column>

              <el-table-column prop="code" label="条形码">
                <template slot-scope="scope">
                  <el-image style="height: 40px" :src="scope.row.code"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="pattenImg" label="花纹图">
                <template slot-scope="scope">
                  <el-image style="height: 40px" :src="scope.row.pattenImg"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="sizeImg" label="花纹名称图">
                <template slot-scope="scope">
                  <el-image style="height: 40px" :src="scope.row.sizeImg"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="specificationImg" label="规格图">
                <template slot-scope="scope">
                  <el-image style="height: 40px" :src="scope.row.specificationImg"></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="img" label="DOT图">
                <template slot-scope="scope">
                  <el-image style="height: 40px" :src="scope.row.dotImg"></el-image>
                </template>
              </el-table-column>

            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="id" align="center" min-width="80" label="ID"></el-table-column>
      <el-table-column prop="orderSn" min-width="200" label="订单号"></el-table-column>
      <el-table-column prop="description" width="200"  label="申请类型 ">
        <template slot-scope="scope">
          {{requestType(scope.row.type)}}
        </template>
      </el-table-column>
      <el-table-column prop="userPhone" width="200"  label="用户手机号 "></el-table-column>
      <el-table-column prop="licensePlate" width="200"  label="车牌号 "></el-table-column>
      <el-table-column prop="carModel" width="200"  label="车辆名称 "></el-table-column>
      <el-table-column prop="tyreBrand" width="200"  label="轮胎品牌 "></el-table-column>
      <el-table-column prop="adminUsername" width="200"  label="处理人 "></el-table-column>
      <el-table-column prop="storeName" width="200"  label="店铺名称 "></el-table-column>
      <el-table-column prop="storeAddress" width="200"  label="店铺位置 "></el-table-column>
      <el-table-column width="200"  label="状态 ">
        <template slot-scope="scope">
          {{status(scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column min-width="180"  prop="status" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="220" align="center" label="操作">
        <template slot-scope="scope">

          <el-tag type="warning" v-if="scope.row.status ===0">待审核</el-tag>
          <el-tag type="primary" v-if="scope.row.status ===1">已审核,处理中</el-tag>
          <el-tag type="success" v-if="scope.row.status ===2">已完成</el-tag>
          <el-tag type="danger" v-if="scope.row.status ===3">已拒绝/已取消</el-tag>
          <el-button v-if="scope.row.status ===3" type="primary" size="mini" icon="el-icon-view" @click="viewReject(scope.row)">查看理由</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="耗材管理"
      :visible.sync="isConsumables"
      width="900px"
      :before-close="handleClosePayStatus">
      <el-button icon="el-icon-plus" type="primary" style="margin: 10px 0">添加</el-button>
      <el-table :data="materialScienceList" border style="width: 100%">
        <el-table-column prop="name" label="材料名称" min-width="180">
          <template slot-scope="scope">
            <el-select style="width: 100%;"
                       clearable
                       filterable
                       v-model="scope.row.name"
                       placeholder="请选择">
              <el-option
                v-for="item in productList"
                :key="item.id"
                :label="item.name+'_' + item.model"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="num" label="数量" min-width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.num"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" min-width="180">

        </el-table-column>
        <el-table-column prop="price" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="primary">确定</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isConsumables = false">结算</el-button>
        <el-button type="primary" @click="isConsumables = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="结算"
      :visible.sync="payStatus"
      width="900px"
      :before-close="handleClosePayStatus">
      <el-table
        :data="materialScienceList"
        border
        style="width: 100%">
        <el-table-column prop="name" label="材料名称" min-width="180">

        </el-table-column>
        <el-table-column prop="num" label="数量" min-width="180">

        </el-table-column>
        <el-table-column prop="price" label="价格" min-width="180">

        </el-table-column>

      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">结算</el-button>
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>


  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";
import {
  getDict,
  getEquipment,
  getProList,
  getRequestArray,
  requestList3,
  updateRequestStatus,
  userTyreList
} from "@/api/apiFox";

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {
        total: 10
      },
      formData: {},
      form: {},
      dialogVisible: false,
      isEdit: false,
      payStatus: false,
      isConsumables: false,
      dialogVisibleTyre: false,
      mark: {lng: '', lat: ''},
      content: "",
      materialScienceList: [
        {id: 1, name: "螺栓", num: "1", price: "25.15"}
      ],
      tyreList: [],
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phone: "",
        status: "",
        type: ""
      },
      loading: false,
      messageType: [],
      expandedRowKeys: [],
      options: [
        {value: 0, label: '待审核'},
        {value: 1, label: '已审核'},
        {value: 2, label: '已完成'},
        {value: 3, label: '已驳回'},
      ],
      postions: [
        {value: 1, label: '左前'},
        {value: 2, label: '右前'},
        {value: 3, label: '左后'},
        {value: 4, label: '右后'},
      ],
      optionsType: [],
      productList: []
    }
  },
  created() {
    this.getDictList('apply_status')
    this.getProductArray()
    this.getDictList2('extension_request_type')
  },
  mounted() {
    this.getLists(this.queryParams)
  },
  methods: {
    getProductArray() {
      getProList().then(res => {
        console.log(res)
        this.productList = res
      })
    },
    getDictList(item) {
      getDict(item).then(res => {
        console.log(res)
        this.messageType = res
      })
    },
    getDictList2(item) {
      getDict(item).then(res => {
        this.optionsType = res
      })
    },
    getListsPage(e) {
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    resert() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        phone: "",
        status: "",
        type: ""
      }
      this.getLists(this.queryParams)
    },
    getSelect() {
      this.getLists(this.queryParams)
    },
    parseTime,
    getLists(params) {
      requestList3(params).then(res => {
        console.log(res)
        this.pager.total = res.total
        this.tableData = res.rows
      })
    },

    handleExpand(row, expandedRows) {
      this.loading = true
      const currentRowId = row.id;
      this.tyreForm = row
      const index = this.expandedRowKeys.indexOf(currentRowId);
      if (index === -1) {

        this.expandedRowKeys = [currentRowId];
      } else {
        this.expandedRowKeys = [];
      }
      console.log(row)
      this.getTyre(row.carId)
    },

    getTyre(item) {
      userTyreList({carId: item}).then(res => {
        console.log(res)
        this.tyreList = res.data
        this.loading = false
      })
    },

    addType(e) {
      this.formData = {}
      this.dialogVisibleTyre = true
    },

    viewReject(row) {
      this.$alert(row.reply, '驳回理由', {
        confirmButtonText: '关闭',
        callback: action => {

        }
      });

    },


    settlement(row) {
      this.payStatus = true
    },

    addConsumables() {
      this.isConsumables = true
    },

    handleCloseTyre() {
      this.dialogVisibleTyre = false
    },
    handleClosePayStatus() {
      this.payStatus = false
    },
    setMark(e) {
      console.log(e)
      this.mark = {lng: e.point.lng, lat: e.point.lat}
      this.reverseGeocode(e.point.lat, e.point.lng)
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isEdit = false
    },
    deleteTyre(item) {
      console.log(item)
    },
    position(val) {
      switch (val) {
        case 1: {
          return '左前'
        }
        case 2: {
          return '右前'
        }
        case 3: {
          return '左后'
        }
        case 4: {
          return '右后'
        }
      }
    },

    handleClose() {
      this.dialogVisible = false
    },
    status(val) {
      switch (val) {
        case 0: {
          return '待审核'
        }
        case 1: {
          return '已审核'
        }
        case 2: {
          return '已完成'
        }
        case 3: {
          return '已驳回'
        }

      }
    },
    requestType(val) {
      let s = this.optionsType.filter(value => {
        return Number(value.dictValue) === val
      })
      if (s && s.length > 0) {
        return s[0].dictLabel
      } else {
        return '暂无数据'
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
